<template>
  <div>
    <div class="main_navigator fCenterY">
          <!-- <el-page-header @back="goBack" acontent="详情页面"></el-page-header> -->
       <!-- aseparator=">" separator-class="el-icon-arrow-right" style="font-size:16px;" -->
      <div>
        <i class="el-icon-back"></i>
        <span class="navigator_span" @click="goBack"> 返回</span>
        &nbsp;&nbsp;
        <span style="color:#d4d4d4">|</span>
      </div>&nbsp;&nbsp;&nbsp;
      <el-breadcrumb style="font-size:16px;">
        <!-- <el-breadcrumb-item><span @click="goBack" style="cursor:pointer;">返回</span>  </el-breadcrumb-item>-->
        <!-- <el-breadcrumb-item>{{crumbOne}}</el-breadcrumb-item> -->
        <el-breadcrumb-item>
          <span :class="active_crumb">{{crumbTwo}}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main_content">
      <div class="name">
        <div style="display:flex;padding:8px 0 8px 15px">
          <div>
            <span>总监：</span>
            <span>{{user_all}}</span>
          </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <div>
            <span>项目名称：</span>
            <span>{{project_name}}</span>
          </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <div>
            <span>编号：</span>
            <span>{{project_number}}</span>
          </div>
          </div>
        </div>
        <div class="select">
          <!-- <el-table
            :data="tableData"
            border
            style="width: 100%;margin-top:10px;"
            :header-cell-style="tableHeaderStyle"
          >
            <el-table-column prop="name" label="旁站" align="center"></el-table-column>
            <el-table-column prop="date" label="修改条目" align="center"></el-table-column>
            <el-table-column prop="name" label="修改次数" align="center"></el-table-column>
            <el-table-column prop="name" label="修改内容" align="center"></el-table-column>
            <el-table-column prop="name" label="修改时间" align="center"></el-table-column>
          </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total,sizes,prev, pager, next, jumper"
            :total="myTotal"
          ></el-pagination> -->
          <!-- :height=" Height - 460 > 140 ? Height - 460 : 140 " -->
          <myTable
            auto='getAllList'
            style='margin-top:15px'
            :height=" Height - 270"
            min-width='130'
            :myColumn=tableProp
            ahide='index,checkbox,mySplitPage,tooltip,background'
            hide='checkbox'
            @select='console'
            hook:created=' myTable.tableData = tableData '
          >
        </myTable>
      </div>
    </div>
  </div>
</template>
<script>
import myhttp, {
  isEmpty,
  msgError,
  msgSuccess,
  msgWarning
} from "../../utils/myhttp";
import qs from "qs";
import api from "../../utils/api";

const arr = ['user_all','project_name','programme_name','project_number','project_id'];
export default {
  data() {
    return {
      tableHeaderStyle: {
        //表头样式
        "background-color": "rgb(242,242,242)"
      },
      active_crumb: "active_crumb", //面包屑当前颜色
      // crumbOne: "日志管理",
      crumbTwo: "修改记录",
      tableData: [],
      loading: "",
      nowPage: 1,
      myTotal: 0,
      currentPage: 1,
      pageSize: 10,
      tableProp: [
        // { label: "旁站", prop: "stationType", html(prop) {
        //   if( prop === 111 ) { 
        //     return '<span>混凝土浇筑旁站</span>'
        //   } else if( prop === 112 ) {
        //     return '<span>大体积混凝土浇筑旁站</span>'
        //   } else if( prop === 113 ) {
        //     return '<span>预应力混凝土张拉旁站</span>'
        //   } else if( prop === 114 ) {
        //     return '<span>大型机组二次灌浆旁站</span>'
        //   } else if( prop === 115 ) {
        //     return '<span>自定义旁站</span>'
        //   }
        // } },
        { label: "修改条目", prop: "modifyEntry" },
        // { label: "修改内容", prop: "beforeValue", html(prop,row){
        //   return row.beforeValue + ' -> ' +  row.afterValue;
        // } },
        { label: "修改前内容", prop: "beforeValue" },
        { label: "修改后内容", prop: "afterValue" },
        { label: "修改人", prop: "userName" },
        { label: "修改时间", prop: "modifyTime", sort:true },
      ],
      user_all: '',
      project_name: '',
      programme_name: '',
      project_number: '',
      project_id: '',
    };
  },
  components: {},
  methods: {
    goBack() {
      // this.$router.go(-1);
      this.$router.push({name:"projectManagement3"});
    },
    openLoading() {
      //loading请求等待
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    getAllList: async function(pageNum,pageSize) {
      var res = await $.post('getJournalDetailByStationId',{
        pageNum, //当前页 
        pageSize,//每页显示条数 
        projectId: this.project_id, //旁站id
      });
      $return('__',res);
      if(!res.success) return $.msgError(res.msg||'error!');
    }
  },
  created() {
    const P = this.$route.params;
    if ( G.isEmpty(P) ) {
      arr.forEach(v=>{
        this[v] = localStorage.getItem(v);
      });
    }else {
      arr.forEach(v=>{
        localStorage.setItem( v, this[v] = P[v] );
      });
    };
    
  },
  destroyed() {
    G.clearLocal(arr);
  },
  mounted() {}
};
</script>
<style scoped>
  .name{
    border:1px solid #d4d4d4;
  }
  .name .el-row:first-child,.name .el-row:nth-child(2){
    padding:10px 0 10px 20px;
  }
  .el-row:nth-child(2){
    border-top:1px solid #d4d4d4;
  }
  .select{
    border-left:1px solid #d4d4d4;
    border-right:1px solid #d4d4d4;
    border-bottom:1px solid #d4d4d4;
    padding:1px 8px 80px 8px;
  }
  .active_crumb {
    color: rgb(90, 160, 230);
  }
</style>


